<template>
  <div style="padding: 40px" align="middle">
    <a-table
      style="width: 800px"
      :pagination="false"
      :data-source="data"
      :columns="[
        { title: 'Status', dataIndex: 'status', key: 'status', slots: { title: 'status' }, scopedSlots: { customRender: 'status' } },
        { title: 'IP',  dataIndex: 'ip', key: 'ip' },
        { title: 'Port',  dataIndex: 'port', key: 'port' },
        { title: 'Title',  dataIndex: 'title', key: 'title', slots: { title: 'title' }, scopedSlots: { customRender: 'title' } },
      ]"
    >
      <div slot="status" slot-scope="text">
        <a-tag v-if="text=='pending'" color="volcano">{{text}}</a-tag>
        <a-tag v-else-if="text=='404'" color="red">{{text}}</a-tag>
        <a-tag v-else color="green">{{text}}</a-tag>
      </div>
      <div slot="title" slot-scope="text, record">
        <span v-if="record">
          <a :href="record.ip+':'+record.port">{{text}}</a>
        </span>
      </div>
    </a-table>
  </div>
</template>

<script>
import axios from "axios";
// const url = "/84/";
const url =
  process.env.NODE_ENV === "production" ? "http://192.168.2." : "/84/";
export default {
  data() {
    return {
      ip: [223, 224, 225, 226, 227, 34, 43, 84],
      port: [8080],
      data: []
    };
  },
  mounted() {
    document.title = "Ping-Page";
    let data = [];
    for (let i of this.ip) {
      for (let p of this.port) {
        const item = {
          ip: url + i,
          port: p,
          status: "pending",
          delay: "",
          title: ""
        };
        data.push(item);
        let countDelay = 0;
        let timer = setInterval(() => {
          countDelay++;
        }, 1);
        axios
          .get(`${url}${i}:${p}`)
          .then(res => {
            clearInterval(timer);
            if (res.status === 200) {
              const pos1 = res.data.indexOf("<title>");
              const pos2 = res.data.indexOf("</title>");
              item.title = res.data.substring(pos1 + 7, pos2);
              item.status = countDelay + "ms";
            }
          })
          .catch(() => {
            clearInterval(timer);
            item.status = "404";
          });
      }
    }
    this.data = data;
  }
};
</script>
